<style lang="less">
	#app {
		text-align: left;
	}
	.userbox {
		display: flex;
		height: 100px;
		justify-content: space-around;
		.userimg {
			width: 30%;
			flex: 0 1 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			span {
				width: 70px;
				height: 70px;
				display: block;
				border-radius: 50%;
				border: 1px solid #ECECEC;
				// background: url({{ userInfo. }});
				background-size: cover;
			}
			img {
				width: 100%;
				height: 100%;
			}
		}
		.username {
			width: 70%;
			flex: 0 0 auto;
			display: flex;
			justify-content: flex-start;
			flex-flow: column nowrap;
			align-self: center;
			text-align: left;
			p {
				&.name {
					font-weight: 700;
					padding-bottom: 10px;
				}
				&.infos {
					font-size: 12px;
					color: #999999;
				}
			}
		}
	}

	.margins {
		margin-bottom: 3px;
	}

	.card-demo-flex {
		display: flex;
	}

	.card-demo-content01 {
		padding: 10px 0;
	}

	.card-padding {
		padding: 15px;
	}

	.card-demo-flex>div {
		flex: 1;
		text-align: center;
		font-size: 12px;
	}

	.card-demo-flex span {
		color: #f74c31;
	}
	.contact{
		display: flex;
		background: #FFF;
		justify-content: space-around;
		flex-flow: row nowrap;
		height: 100%;
		span{
			flex: 0 1 auto;
			width: 23%;
			height: 80%;
			align-self: flex-start;
			display: flex;
			justify-content: flex-end;
			flex-flow: column;
			&.tel{
				background: url(images/tel.png) no-repeat center;
				background-size: 50% auto;

			}
			&.wx{
				background: url(images/wx.png) no-repeat center;
				background-size: 50% auto;

			}
			&.wb{
				background: url(images/wb.png) no-repeat center;
				background-size: 50% auto;

			}
			a{
				text-align: center;
				font-size: 12px;
			}

		}

	}
</style>
<template>
	<div class="container">
		<loading :show="isLoading" text="请稍候"></loading>
		<x-header title="个人中心"></x-header>

		<group>
			<div class="userbox">
				<div class="userimg"><span><img :src="userInfo.icon" alt="" style="-webkit-border-radius:50%"></span></div>
				<div class="username">
					<p class="name">{{ userInfo.name }}</p>
					<!-- <p class="infos" @click="editUser">查看并编辑个人资料</p> -->
					<p class="infos">注册日期：{{ userInfo.regist_time }}</p>
				</div>
			</div>

			<card>
				<div slot="content" class="card-demo-flex card-demo-content01">
					<div class="vux-1px-r" @click="pageto(0)">
						<p class="margins">待支付</p>
						<span>{{ order.notPay }}</span>
					</div>
					<div class="vux-1px-r" @click="pageto(1)">
						<p class="margins">待收货</p>
						<span>{{ order.notReceive }}</span>
					</div>
					<div @click="pageto(2)">
						<p class="margins">已完成</p>
						<span>{{ order.all }}</span>
					</div>
				</div>
			</card>
		</group>
		<group>
			<!-- <cell :border-intent="false" title="我的地址" value-align="left" is-link link="/GoodsOrder/Goodsorder/2"></cell> -->
			<!-- <cell :border-intent="false" title="我的优惠劵" value-align="left" is-link></cell> -->
			<!-- <cell :border-intent="false" @click.native="vuex_is_sb" title="分润金额" value-align="left" is-link value="111"></cell> -->
			<!-- <cell title="收益" value-align="right" :value="userInfo.资金账户"></cell> -->
		</group>

		<tabbar>
			<tabbar-item :link="{name: 'Index'}">
				<i slot="icon" class="fa icon-tabbar fa-home"></i>
				<span slot="label">首页</span>
			</tabbar-item>
			<tabbar-item :link="{ name: 'car' }" :badge="cartNum">
				<i slot="icon" class="fa icon-tabber fa-shopping-cart"></i>
				<span slot="label">购物车</span>
			</tabbar-item>
			<tabbar-item :link="{name: 'Mine'}">
				<i slot="icon" class="fa icon-tabbar fa-user"></i>
				<span slot="label">我的</span>
			</tabbar-item>
		</tabbar>

		<div v-transfer-dom>
			<popup v-model="showPopup" position="bottom" height="14%">
				<div class="contact">
					<span class="tel"><a>电话客服</a></span>
					<span class="wx"><a>微信客服</a></span>
					<span class="wb"><a>微博客服</a></span>
				</div>
			</popup>
		</div>
	</div>
</template>
<script>
	import { getUserInfo } from '@/api/index'
	import { totalCart } from '@/api/Goods'
	import {
		XHeader,
		Card,
		Group,
		Cell,
		Tabbar,
		TabbarItem,
		TransferDom,
		Popup,
		Loading
	} from 'vux'
	export default {
		name: 'index',
		components: {
			XHeader,
			Card,
			Group,
			Cell,
			Tabbar,
			TabbarItem,
			Popup,
			Loading
		},
		data() {
			return {
				showPopup: false,
				//用户信息
				userInfo: {},
				order: {},
				//Loading 显示
				isLoading: false,
				cartNum: '0'
			}
		},
		directives: {
			TransferDom
		},
		methods: {
			vuex_is_sb() {
				this.showPopup = true;
			},
			pageto(id){
				this.$router.push({
					name: 'Query',
					params: {
						id: id
					}
				})
			},
			// 获取个人资料信息
			getUserInfo() {
				this.isLoading = true
				getUserInfo({a: 'userCenter'}).then(response => {
					this.userInfo = response.user
					this.order = response.order
					console.log(this.userInfo);
					this.isLoading = false
				})
			},
			// 编辑人个资料
			editUser() {
				this.$router.push({name: 'Edit'});
			},
			// 获取购物车商品总数
			getTotalCart() {
				// totalCart().then(response => {
				// 	this.cartNum = response.total
				// });
			}
		},
		mounted() {
			this.getUserInfo()
			this.getTotalCart()
		}

	}
</script>
